<template>
  <div>

    <div class="header">
      <img src="../../img/logo.jpg" @click="$router.push('/')">
      <!-- <div class="swiper">
        <el-carousel >
      <el-carousel-item v-for="item in item" :key="item">
        <img :src="item" alt="">
      </el-carousel-item>
    </el-carousel>
      </div> -->
      <!-- <div class="shopping" @click="$router.push('/shopping')">购物车</div> -->
    </div>
    <!-- <div class="nav">

    </div> -->
    <div class="container">
      <div class="con-box">
        <div class="aside">
          <el-row class="tac">
            <el-col :span="12">
              <el-menu default-active="1" class="el-menu-vertical-demo" router>
                <template slot="title">
                  <i class="el-icon-user"></i>
                  <span slot="title">个人</span>
                </template>
                <el-menu-item index="/account/personal-data">
                  <template slot="title">
                    <i class="el-icon-user"></i>
                    <span slot="title">个人资料</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="/account/order">
                  <i class="el-icon-menu"></i>
                  <span slot="title">我的订单</span>
                </el-menu-item>
                <el-submenu index="/account/logistics">
                  <template slot="title">
                    <i class="el-icon-location-information"></i>
                    <span slot="title">地址</span>
                  </template>
                  <el-menu-item index="/account/logistics">
                    <i class="el-icon-document"></i>
                    <span slot="title">收货列表</span>
                  </el-menu-item>
                  <el-menu-item index="/account/logistics-update">
                    <i class="el-icon-edit-outline"></i>
                    <span>新增收货地址</span>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item index="/account/shopping">
                  <i class="el-icon-setting"></i>
                  <span slot="title">购物车</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </div>
        <!-- 二级路由 -->
        <div class="main">
          <router-view />
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      user: null
    };
  },
  mounted() {
    let user = sessionStorage.getItem("user");

    if (user) {
      this.user = JSON.parse(user);
    } else {
      this.$router.push("/mylogin");
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%vh;
  height: 100%vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 100px;

  img {
    width: 150px;
  }
}


.nav {
  width: 100%;
  height: 50px;
  background-color: black;
}

.container {
  // background-color: #ccc;
  width: 100%;
  height: 1000px;

  background: url(https://www.maccosmetics.com.cn/media/export/cms/artistry/allartists/ARTIST_AMBIENT_CROP.jpg);
  background-position: 0 0;
  background-size: 100%;
  background-attachment: fixed;

  .con-box {
    display: flex;
    width: 80%;
    margin: 0 auto;
    padding: 50px 0;

    .aside {
      width: 20%;

      .tac {
        .el-menu-vertical-demo {
          width: 200px;
          height: 800px;
        }
      }
    }

    .main {
      width: 80%;
      height: 800px;
      background-color: #fff;

    }

  }




}
</style>